<template>
    <div class="footer">
        <span class="check_all">全选</span>
        <input @click="onCheckAll" v-model="checkAll" type="checkbox">
        <span class="select_text">已选择：{{ $store.getters.getChecksLength }} / 全部：{{ $store.getters.listLength }}</span>
        <button @click="onDeleteAllCheck" v-show="$store.getters.getChecksLength" class="delete_all">删除所有已选</button>
    </div>
</template>

<script>
export default {
    name: "compFooter",
    data(){
        return {
            checkAll: false
        }
    },
    methods:{
        onCheckAll(){
            console.log(this.checkAll);
            this.$store.commit("checkAllItem", !this.checkAll)
        },
        onDeleteAllCheck(){
            this.$store.commit("deleteAllCheck")
        }
    }
}
</script>

<style scoped lang="scss">

.footer {
    .check_all {
        font-weight: bold;
    }

    .select_text {
        margin-left: 40px;
    }

    .delete_all {
        float: right;
        padding: 4px 10px;
        background-color: #e54f4f;
        color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 4px;
    }
}
</style>